<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记事本</title>
  <link rel="stylesheet" href="http://10.55.10.44:25040/css/common.css">
  <style>
    #app {
      display: flex;
      background: #eee;
      width: 100vw;
      height: 100vh;
      align-items: center;
      justify-content: center;
    }

    .box {
      width: 400px;
      min-height: 200px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      padding: 5px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      max-height: 400px;
      position: relative;
    }

    header {
      width: 100%;
      height: 50px;
      display: flex;
      margin-bottom: 5px;
    }

    header input,
    header span {
      height: 100%;
    }

    header input {
      flex: 1;
      border: 2px solid tomato;
      border-radius: 6px 0 0 6px;
      outline: none;
      padding-left: 8px;
    }

    header input::placeholder {
      font-style: italic;
      color: #ccc;
    }

    header span {
      width: 100px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      background: tomato;
      border-radius: 0 6px 6px 0;
      cursor: pointer;
      user-select: none;
    }

    main {
      flex: 1;
      overflow: hidden;
      overflow-y: auto;
      margin-bottom: 10px;
    }

    main::-webkit-scrollbar {
      display: none;
    }

    main .item {
      display: flex;
      border-bottom: 1px solid #ccc;
      /* min-height: 41px; */
      line-height: 40px;
      color: #666;
      align-items: center;
      padding: 10px 30px 10px 0;
      position: relative;
    }

    main p {
      line-height: 20px;
    }

    .item:hover {
      background: #f5f5f5;
    }

    .item p,
    .item span {
      pointer-events: none;
    }

    .item span {
      margin: 0 20px 0 10px;
    }

    .item i {
      /* margin-left: auto; */
      display: none;
      font-weight: 600;
      /* margin-right: 10px; */
      position: absolute;
      right: 10px;
      top: 50%;
      height: 20px;
      line-height: 20px;
      transform: translateY(-50%);
      color: tomato;
      cursor: pointer;
      user-select: none;
    }

    .item:hover i {
      display: block;
    }

    footer {
      color: #898988;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px 15px;
    }

    footer b {
      cursor: pointer;
      user-select: none;
    }

    footer b:active {
      color: red;
    }

    .jd {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .jd span {
      flex: 1;
      text-align: center;
    }

    .active {
      background: tomato;
      color: #eee;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box">
      <header>
        <input @keydown.enter="onClickAdd" v-model.trim="inpVal" :type="type" placeholder="请输入任务">
        <span @click="onClickAdd">添加任务</span>
      </header>
      <main v-if="list.length" ref="main">
        <div class="item" v-for="(item, index) in list" :key="item?.id">
          <span>{{ index + 1 }}.</span>
          <p>{{ item.val }}</p>
          <i @click="onClickDel(item.id)">&times;</i>
        </div>
        <div class="tip" v-if="$refs.main?.scrollHeight !== $refs.main?.offsetHeight" style="position: absolute; bottom: 50px; left: 50%;">&varr;</div>
      </main>
      <main v-else :style="{display: 'flex',margin: 'auto',lineHeight: '50px',color: '#999'}">暂无任务...</main>
      <footer>
        <span>合计: {{ total }}</span>
        <b @click="onClickDelAll">清空任务</b>
      </footer>
      <div class="jd">
        <span @click="curIndex = index" v-for="(item, index) in tabs" :key="item" :class="{active: curIndex === index}">{{ item }}</span>
      </div>
      <div class="progressBar"></div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // 创建vue实例
    const app = new Vue({
      el: '#app',
      data: {
        inpVal: '',
        list: [],
        type: 'number',
        curIndex: 0,
        tabs: ['京东秒杀', '今日特价', '品类秒杀']
      },
      methods: {
        onClickAdd (e) {
          console.log(e.target)
          // 若输入框的值为空, 不执行后面代码
          if (this.inpVal === '') return
          // 给list前面添加一项
          this.list.unshift({
            id: Date.now(),
            val: this.inpVal,
          })
          // 添加完之后, 重置输入框的值
          this.inpVal = ''
          // console.log(1121)
        },
        onClickDel (id) {
          // 通过对应id筛选出去这一项
          // console.log(id, this.list)
          this.list = this.list.filter(v => v.id !== id)
          // console.log(this.list)
        }, 
        onClickDelAll() {
          // 清空所有
          this.list = []
        }
      },
      computed: {
        total () {
          return this.list.length
        }
      }
    })
  </script>
</body>
</html>
